<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('订单ECharts')"/>
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <div class="col-sm-6">
                        <h5>客户订单统计柱状图</h5>
                    </div>
                    <div class="col-sm-6" style="margin-bottom: 10px">
                        <select class="form-control" name="choice">
                            <option value="type">按订单类型</option>
                            <option value="amount">按订单金额</option>
                        </select>
                    </div>
                </div>
                <div class="ibox-content">
                    <div class="echarts" id="echarts-bar-chart"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<th:block th:include="include :: footer"/>
<th:block th:include="include :: echarts-js"/>
<script type="text/javascript">
    $(function () {
        var myChart = echarts.init(document.getElementById('echarts-bar-chart'));
            $.get('/stats/customer/getOrderStats').done(function (data){
                var option = {
                    title: {
                        text: data.title
                    },
                    tooltip: {},
                    legend: {
                        data: data.legend
                    },
                    xAxis: {
                        data:data.xName
                    },
                    yAxis: {},
                    series: [{
                        name: data.legend[2],
                        type: 'bar',
                        data: data.nums[2]
                    },
                        {
                            name: data.legend[1],
                            type: 'bar',
                            data: data.nums[1]
                        },
                        {
                            name: data.legend[0],
                            type: 'bar',
                            data: data.nums[0]
                        },
                    ]
                };
                myChart.setOption(option);
                window.onresize = myChart.resize;
            });
    });
    $(function () {
        var myChart = echarts.init(document.getElementById('echarts-bar-chart'));
        $("select[name='choice']").change(function () {
            var selector = $("select[name='choice']").val();
            if(selector == 'type'){
                $.get('/stats/customer/getOrderStats').done(function (data){
                    var option = {
                        title: {
                            text: data.title
                        },
                        tooltip: {},
                        legend: {
                            data: data.legend
                        },
                        xAxis: {
                            data:data.xName
                        },
                        yAxis: {},
                        series: [{
                            name: data.legend[2],
                            type: 'bar',
                            data: data.nums[2]
                        },
                            {
                                name: data.legend[1],
                                type: 'bar',
                                data: data.nums[1]
                            },
                            {
                                name: data.legend[0],
                                type: 'bar',
                                data: data.nums[0]
                            },
                        ]
                    };
                    myChart.clear();
                    myChart.setOption(option);
                    window.onresize = myChart.resize;
                });
            }else{
                $.get('/stats/customer/getAmountStats').done(function (data){
                    var option = {
                        title: {
                            text: data.title
                        },
                        tooltip: {},
                        legend: {
                            data: data.legend
                        },
                        xAxis: {
                            data:data.xName
                        },
                        yAxis: {},
                        series: [{
                            name: data.legend[0],
                            type: 'bar',
                            data: data.nums
                        }]
                    };
                    myChart.clear();
                    myChart.setOption(option);
                    window.onresize = myChart.resize;
                });
            }
        });
    })
</script>
</body>
</html>